<template>
  <div class="zhuanti">
    <h3>精题专选</h3>
    <van-swipe :loop="false" :width="300" :show-indicators="false">
      <van-swipe-item v-for="item in topicList" :key="item.id">
        <div>
          <img :src="item.item_pic_url" alt="" class="scene" />
          <p class="title">{{ item.title }}</p>
          <p class="subtitle">{{ item.subtitle }}</p>
        </div>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
export default {
  name: "Projectselection",
  props: ["topicList"],
  data() {
    return {};
  },
};
</script>

<style lang='less' scoped>
div h3 {
  line-height: 25px;
  font-size: 9px;
  text-align: center;
}
.van-swipe-item img {
  width: 300px;
  height: 200px;
  display: block;
}
.title {
  font-size: 7px;
  margin-top: 10px;
}
.subtitle {
  font-size: 7px;
  margin-top: 10px;

  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.van-swipe-item {
  margin-left: 10px;
  }
</style>